<!-- Main Navigation Bar -->

#container {
    padding-top:400px;
}

#header {
    z-index: 9999;
    background: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/Line2.png?attachauth=ANoY7crj3tUG6tUlr2fsjhWSc8Y5EgQUCzTXJK7DfiDkluJs-f41ou8O0hKXaUguKCsNxBTlFQebrEGiSRxhghlaw1vrD9gmDnt95ldghGMJe52PcAXpJnWA3zeK0il6crE669P0Agb7Fw0hQUw7X1fPh3s_FlBfgpckpPdN6zt8ZHfV4wJOd7NSUZaYkKcj4EMViDyqV0vnu2XWb1sw4OD3FRZi6Ho7LQ%3D%3D&attredirects=0) repeat-x scroll 0 0 transparent;
}

#logo h1 { top:-1000px; }
#logo h1, #logo img { position:absolute;    }
#logo img { top:-35px; left: 50%; margin-left:-62px; }
#logo img.custom { max-height: 96px; }

#header, #solid {
    height: 150px;
    width: 100%;
    position:fixed;
    top: 0;
    left: 0;
}

.clearfix:after {â€¨       content: ".";â€¨       display: block;â€¨       clear: both;â€¨       line-height: 0;â€¨       height: 0;
}

.rel {
    position:relative;
}

.wrap {
    width:100%;
    display:block;
    margin: 0px auto;
       margin-top: 50px;
       margin-right-value: auto;
       margin-bottom: 0px;
       margin-left-value: auto;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
       display: block;
}

#navigation {
    width:100%;
}

#nav-main-left, #nav-main-right {
       width: 575px;
}

.float-left {
       float: left;
}

.float-right {
       float: right;
}

#nav-main-left ul {
       font-family:Tahoma;
       font-size:19px;
    margin-left: 100px;
}

#nav-main-right ul {
       font-family:Tahoma;
       font-size:19px;
    margin-right:100px;
}

#nav-main-left li {
       margin-right: 25px;
       margin-right-value: 25px;
       display: inline;
}

#nav-main-right li {
       margin-left: 25px;
       margin-left-value: 25px;
       display: inline;
}

#nav-main-left li a {
     color:#fff;
   text-decoration:none;
}

#nav-main-right li a {
     color:#fff;
   text-decoration:none;
}

<!-- End of Main Navigation Bar -->

<!-- Background SlideShow -->

#pattern{background:url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/pattern.png?attachauth=ANoY7cpCp5wbCmgKlCWtZu6XgpZggpwxc-PSGQwviEaE5MF-GNFMrHbDBeh03I7WUZcOMvFX89pH7Vuy9esJECuFdjV7pqzhp_CjPKeKRuV53m2nejaNtoOupUl7hYUhNDwSRe7QTp3u5cZ8JZEsyc9U1X991VP4LUJaoVWIZH6xUR5Tl5j35NQhgUwrzQ3TupKzmNpHmcxUoxRPPGSwxgKPPCk9ZOGeMg%3D%3D&attredirects=0) top center;width:100%;height:100%;display:block;position:fixed;z-index:9996;top:0;left:0}

.cb-slideshow,
.cb-slideshow:after { 
       position: fixed;
       width: 100%;
       height: 100%;
       top: 0px;
       left: 0px;
       z-index: 0; 
}
.cb-slideshow:after { 
       content: '';
       background: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/pattern.png?attachauth=ANoY7cpCp5wbCmgKlCWtZu6XgpZggpwxc-PSGQwviEaE5MF-GNFMrHbDBeh03I7WUZcOMvFX89pH7Vuy9esJECuFdjV7pqzhp_CjPKeKRuV53m2nejaNtoOupUl7hYUhNDwSRe7QTp3u5cZ8JZEsyc9U1X991VP4LUJaoVWIZH6xUR5Tl5j35NQhgUwrzQ3TupKzmNpHmcxUoxRPPGSwxgKPPCk9ZOGeMg%3D%3D&attredirects=0) repeat top left; 
}
.cb-slideshow li span { 
       width: 100%;
       height: 100%;
       position: fixed;
       top: 0px;
       left: 0px;
       color: transparent;
       background-size: cover;
       background-position: 50% 50%;
       background-repeat: none;
       opacity: 0;
       z-index: 0;
    -webkit-backface-visibility: hidden;
       -webkit-animation: imageAnimation 36s linear infinite 0s;
       -moz-animation: imageAnimation 36s linear infinite 0s;
       -o-animation: imageAnimation 36s linear infinite 0s;
       -ms-animation: imageAnimation 36s linear infinite 0s;
       animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
       z-index: 1000;
       position: fixed;
       bottom: 30px;
       left: 0px;
       width: 100%;
       text-align: center;
       opacity: 0;
       color: #fff;
       -webkit-animation: titleAnimation 36s linear infinite 0s;
       -moz-animation: titleAnimation 36s linear infinite 0s;
       -o-animation: titleAnimation 36s linear infinite 0s;
       -ms-animation: titleAnimation 36s linear infinite 0s;
       animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
       font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
       font-size: 240px;
       padding: 0;
       line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/2.jpg);
       -webkit-animation-delay: 6s;
       -moz-animation-delay: 6s;
       -o-animation-delay: 6s;
       -ms-animation-delay: 6s;
       animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/3.jpg);
       -webkit-animation-delay: 12s;
       -moz-animation-delay: 12s;
       -o-animation-delay: 12s;
       -ms-animation-delay: 12s;
       animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/4.jpg);
       -webkit-animation-delay: 18s;
       -moz-animation-delay: 18s;
       -o-animation-delay: 18s;
       -ms-animation-delay: 18s;
       animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/5.jpg);
       -webkit-animation-delay: 24s;
       -moz-animation-delay: 24s;
       -o-animation-delay: 24s;
       -ms-animation-delay: 24s;
       animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
       background-image: url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/6.jpg);
       -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
       -o-animation-delay: 30s;
       -ms-animation-delay: 30s;
       animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
       -webkit-animation-delay: 6s;
       -moz-animation-delay: 6s;
       -o-animation-delay: 6s;
       -ms-animation-delay: 6s;
       animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
       -webkit-animation-delay: 12s;
       -moz-animation-delay: 12s;
       -o-animation-delay: 12s;
       -ms-animation-delay: 12s;
       animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
       -webkit-animation-delay: 18s;
       -moz-animation-delay: 18s;
       -o-animation-delay: 18s;
       -ms-animation-delay: 18s;
       animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
       -webkit-animation-delay: 24s;
       -moz-animation-delay: 24s;
       -o-animation-delay: 24s;
       -ms-animation-delay: 24s;
       animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
       -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
       -o-animation-delay: 30s;
       -ms-animation-delay: 30s;
       animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
       0% { opacity: 0;
       -webkit-animation-timing-function: ease-in; }
       8% { opacity: 1;
              -webkit-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
       0% { opacity: 0;
       -moz-animation-timing-function: ease-in; }
       8% { opacity: 1;
              -moz-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
       0% { opacity: 0;
       -o-animation-timing-function: ease-in; }
       8% { opacity: 1;
              -o-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
       0% { opacity: 0;
       -ms-animation-timing-function: ease-in; }
       8% { opacity: 1;
              -ms-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
}
@keyframes imageAnimation { 
       0% { opacity: 0;
       animation-timing-function: ease-in; }
       8% { opacity: 1;
              animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
       0% { opacity: 0 }
       8% { opacity: 1 }
       17% { opacity: 1 }
       19% { opacity: 0 }
       100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
       0% { opacity: 0 }
       8% { opacity: 1 }
       17% { opacity: 1 }
       19% { opacity: 0 }
       100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
       0% { opacity: 0 }
       8% { opacity: 1 }
       17% { opacity: 1 }
       19% { opacity: 0 }
       100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
       0% { opacity: 0 }
       8% { opacity: 1 }
       17% { opacity: 1 }
       19% { opacity: 0 }
       100% { opacity: 0 }
}
@keyframes titleAnimation { 
       0% { opacity: 0 }
       8% { opacity: 1 }
       17% { opacity: 1 }
       19% { opacity: 0 }
       100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) { 
       .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
       .cb-slideshow li div h3 { font-size: 80px }
}

<!-- /end of Background Slideshow -->

<!-- Parallax plugin for overlap -->

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
*/

@charset "utf-8";
/* CSS Document */

html, body{
    margin: 0;
    padding: 0;    
    min-width: 1000px;
}

p{
    margin: 0 0 20px 0;    
    text-align:center;
    font-size:25px;
    font-size-adjust:0.531;
}

p, ul{
    font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight:200;
    font-style:normal;
}

img{
    border: 0;
}

h1, #pixels{
    font-family:"Museo 900", Verdana, serif;
    font-size-adjust:0.40;
    font-weight:700;
    font-style:normal;
}

h2{
    font-family:"Beau Sans Pro Book", Verdana, sans-serif;
    font-size-adjust:0.531;
    font-weight:500;
    font-style:normal;
}

#header h1, #pixels{
    color: #48941A;
}

.float-left{
    float: left;    
    margin: 0 0 0 0;
}

.float-right{
    float: right;
    margin: 0 0 0 0;
}

.center{
    font-size: 2.5em;
    padding: 80px 0 0 0;
    text-align: center;
}

#navi{
    list-style: none;
    position: fixed;
}

#navi li{
    margin: 0 0 15px 0;    
}

#header, #intro, #second{
    width: 100%;
}

#intro{
    width:100%;
    height:550px;
    background-color: transparent;
    color: white;
    margin: 0 auto;
    padding: 0;
}

#second{
    background-color:#fff;
    color: black;
    height: 300px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

#third{
    background-color:#e0e0e0;
    color: white;
    height: 500px;
    width: 100%;
    padding: 0 0 0 0;    
}

#third .bg{
    background-color:#adadad;
    height: 500px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 200;
}

#fourth {
    background-color: #fff;
  height:300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 0;
}

#fifth{
    background-color: transparent;
    height: 300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 0;
}

#sixth{
    background-color: #fff;
    height: 75px;
    width: 100%;
    margin: 0 auto;
}

.story{
    margin: 0 auto;
    min-width: 1000px;
    overflow: auto;
    width: 1000px;
}

.story .float-left, .story .float-right{
    padding: 75px 0 0 0;
    position: relative;
    width: 100%;    
}

#content {
    width:100%;
    position:relative;
    z-index:9998;
}

.learn-more-hero{
background:url(https://f1e4fcd5-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/forge/learn-more-hero.png?attachauth=ANoY7cryMitprAb7eUV2mNyP2vKsczv_RSEhavh55Fib2BdOOgOaUqsps4repnIxDMDPcCQ_a3Sb6pexz37e44ATvNlam6AifXW8548xyB7h76yHebG6NAFAwEmDcw9I0p3a6qsuazID6k8DYOpSgfvWOrXEX883-eVxy6KC4ZI_JbYcmTIAT3UU4vfnvYV0H4OKZSWq3Y6tYwZoSt0vlBSsKJX8xMDJxQ%3D%3D&attredirects=0) no-repeat 0 0;
  width:98px;
  height:46px;
  display:block;
  position:absolute;
  left:50%;
  margin-left:-49px;
  z-index:998; 
  top:504px;
}

/* Quovolver Demo Styles */

/*
  |    All required styles for the effect
  |    are labeled with this *required*
*/

a { 
     text-decoration: none; 
     color: #52b7d4; 
}

a:hover { 
     color: #ea9941; 
}

code { 
     font-family: Tahoma; 
     background: #f2f2f2; 
     display: block;  
}    

blockquote p {
     margin-bottom: 10px; 
     font-style: italic;
     text-align:justify;
}

blockquote cite { 
     font-style: normal; 
     display: block; 
     text-align: right; 
     text-transform: uppercase; 
     font-size: 10px; 
     font-weight:bold; 
     letter-spacing: 1px; 
     font-family: Tahoma; 
}

/*
  |    Setting the width for the blockquotes is required
  |    to accurately adjust it's container
*/

blockquote {
    font-family: Georgia, Times, serif;
    width: 750px; /* required */
    margin: 0 auto;
}
    
/*
  |    The #quote_wrap div is created
  |    by Quovolver to wrap the quotes
*/

#quote_wrap { 
    background: #fff url(https://8ffbbe80-a-61550f34-s-sites.googlegroups.com/a/magellantutoring.com/magellan-tutoring/quotes.png?attachauth=ANoY7cqseqPAqJ6kugT-Dscnbbphm-zRKBRpNjixe1Uvk2RwJKWKp7kfV8SoxA5LUZJC6OEKrscI9SG-ODBQduJa3LR13CNdtykuFPNobTGs9YxKh-jaMlWSZjaGi94jucPzIudzdTgaBLJ0SC4twtqF7lcmNpteDhWWl8X2tNENZTPr-cydAigmnWC-V-hJ-vGqqhPiGjj8Nwo8NeqjVkSfrIguErIrd4bEqg-bKqOAdQuRtyGZxS0%3D&attredirects=0) no-repeat 20px 20px;
    margin: 40px 0; 
  padding: 20px; 
  border: 1px solid #fff;
}

<!-- end of Quovolver -->

#footer-links { padding: 74px 0; }
#footer-links h3 { margin: 0 0 10px 0; padding:0; }
#footer-links h3, #footer-links ul li, #footer-links { color:#fff !important; }
#footer-links ul li { list-style: outside; list-style: disc; padding:0; margin:0 0 0 15px;}
#footer-links ul li a, #footer-links ul li, #footer-links { font-size:12px !important; }
#footer-links p {font-size:12px !important; }

/* Three Panel Float */
.col { margin: 0 10px; float: left; }
.three-row .col {width: 300px; text-align: center; }
.four-row .col {width: 225px; margin: 0 20px 0 0; }
.four-row .col.cap { margin: 0; }

<!-- Footer Bar -->
#footerBar {
       list-style-type:none;
       padding:0;
       height:20px;
       font-size:0.9em;
       width:950px;
}

#footerBar li {
       height:20px;
       background-color:#FFF;
       width: 12.5%;
       position:relative;
float: left;
display:inline;
}

#footerBar li a {
font-family:Tahoma;
color:#000;
text-decoration:none;
text-weight: bold;
margin: 0px 15px 0px 0px;
padding:25px;
text-align:center;
vertical-align:middle;
font-size:10px;
}

<-- End of Footer Bar -->
